<template>
  <view class="content-search">
    <view class="weui-search-bar">
      <view :class="[{'fullScreen': !showMore}, {'weui-search-bar__form':true}]">
        <!-- 搜索框 -->
        <view class="weui-search-bar__box" style="background-color: #F1F2F5;">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" v-if="showProduct" v-model="searchData.proName" class="weui-search-bar__input"
            :maxlength="20" placeholder="请输入产品名称" />
          <input type="text" v-if="showState" v-model="searchData.vehicleNo" class="weui-search-bar__input"
            :maxlength="maxlen" :placeholder="placeHolder" @confirm="searchBycar" @input="checkVehicleLen" />
          <picker v-if="!showProduct && !showState" @change="bindPicker1ChangeTop" :value="index1" mode="selector"
            :range="custList" :range-key="rangeKey[0]">
            <view class="uni-input">{{customerName}}</view>
          </picker>
        </view>
      </view>
      <!-- 搜索按钮,调用搜索查询方法 -->
      <view class="weui-search-bar__cancel-btn" @click="searchBycar">搜索</view>
      <view class="weui-search-bar__cancel-btn btn-more" v-if="showMore" @click="searchMore">更多</view>
    </view>
    <uni-popup class="searchPop" ref="searchPop">
      <view class="searchBox">
        <view class="title">
          <text class="til">筛选</text>
          <uni-icons class="close-icon" @click="closeLinepop" type="closeempty" size="40rpx" color="#333" />
        </view>
        <view class="top">
          <view class="items" v-if="showState">
            <text class="til">车牌号：</text>
            <input type="text" style="margin-left:-2px;" v-model="searchData.vehicleNo" class="" placeholder="请输入车牌号" />
          </view>
          <view class="items" v-if="showCustomer">
            <text class="til">客户：</text>
            <picker @change="bindPicker1Change" :value="searchDatas.customerId" mode="selector" :range="custList"
              :range-key="rangeKey[0]">
              <view class="uni-input" :class="{ isactive: index1 }">{{customerName}}</view>
            </picker>
            <!-- <input type="text" v-model="searchDatas.customer" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view v-if="showState" class="items">
            <text class="til">状态：</text>
            <picker @change="bindPicker2Change" mode="selector" :value="index2" :range="stateList"
              :range-key="rangeKey[1]">
              <view class="uni-input" :class="{ isactive: index2 }">{{statusName}}</view>
            </picker>
            <!-- <input type="text" v-model="searchDatas.status" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view class="items">
            <text class="til">时间：</text>
            <uni-datetime-picker v-model="range" type="daterange" @change="bindPicker3Change">
            </uni-datetime-picker>
            <!-- <input type="text" v-model="searchDatas.time" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view class="btn">
            <button class="btn2" type="primary" plain size="mini" @click="resetForm">重置</button>
            <button class="btn1" type="primary" plain size="mini" @click="confirmForm">确认</button>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 筛选列表 -->
    <!-- <view class="uni-tab" v-if="showTab">
			<view>
				<picker @change="bindPicker1Change" :value="index1" mode="selector" :range="custList" :range-key="rangeKey[0]">
					<view class="uni-input" :class="{ isactive: index1 }">客户</view>
				</picker>
			</view>
			<view v-if="showState == 1">
				<picker @change="bindPicker2Change" mode="selector" :value="index2" :range="stateList" :range-key="rangeKey[1]">
					<view class="uni-input" :class="{ isactive: index2 }">状态</view>
				</picker>
			</view>
			<view>
				<uni-datetime-picker v-model="range" type="daterange" @change="bindPicker3Change">
					<view class="uni-input" :class="{ isactive: range.length > 0 }">时间</view>
				</uni-datetime-picker>
			</view>
			<view>
				<view class="uni-input" @click="resetClick">重置</view>
			</view>
		</view> -->
  </view>
</template>

<script>
  export default {
    name: 'top-search',
    props: {
      showCustomer: {
        type: Boolean,
        default: true
      },
      showProduct: {
        type: Boolean,
        default: false
      },
      placeHolder: {
        type: String,
        default: '请输入车牌号'
      },
      maxlen: {
        type: Number,
        default: 18
      },
      showTab: {
        type: Boolean,
        default: true
      },
      showSearch: {
        type: Boolean,
        default: true
      },
      showState: {
        type: Boolean,
        default: true
      },
      showMore: {
        type: Boolean,
        default: true
      },
      custList: {
        type: Array,
        default: []
      },
      stateList: {
        type: Array,
        default: []
      },
      rangeKey: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        range: [],
        index2: 0,
        index1: 0,
        statusName: '请选择状态',
        customerName: '请选择客户',
        searchData: {
          vehicleNo: undefined,
          customerId: undefined,
          waybillStatus: undefined,
          startTime: undefined,
          endTime: undefined,
          proName: undefined
        }
      };
    },
    methods: {
      closeLinepop() {
        this.$refs['searchPop'].close();
      },
      checkVehicleLen(val) {
        this.$nextTick(() => {

          if (val.detail.value.length > 18) {
            this.$set(this.searchData, 'vehicleNo', val.detail.value.slice(0, 18))
          }
        })
      },
      resetForm() {
        this.searchData = {
          vehicleNo: undefined,
          customerId: undefined,
          waybillStatus: undefined,
          startTime: undefined,
          endTime: undefined,
        }
        this.range = []
        this.customerName = '请选择客户'
        this.statusName = '请选择状态'
      },
      confirmForm() {
        console.log('提交的表单值为', this.searchData);
        this.$emit('confirmChange', this.searchData);
        this.closeLinepop()
      },
      bindPicker3Change(e) {
        console.log('maskClick事件:', e);
        this.searchData.startTime = e[0]
        this.searchData.endTime = e[1]
        // this.$emit('bind3Change', e);
      },
      searchBycar() {
        console.log('搜索', this.searchData);
        this.$emit('bindChange', this.searchData);
      },
      searchMore() {
        this.$refs['searchPop'].open('bottom');
      },
      bindPicker2Change: function (e) {
        this.index2 = e.detail.value;
        this.statusName = this.stateList[this.index2].waybillStatusName
        this.searchData.waybillStatus = this.stateList[this.index2].waybillStatus
        // this.$emit('bind2Change', this.stateList[this.index2]);
      },
      bindPicker1ChangeTop(e) {
        console.log('picker2发送选择改变，携带值为', this.custList);
        this.index1 = e.detail.value;
        this.customerName = this.custList[this.index1].customerName
        this.searchData.customerId = this.custList[this.index1].id
      },
      bindPicker1Change(e) {
        this.index1 = e.detail.value;
        this.customerName = this.custList[this.index1].customerName
        // this.searchData.customerId = this.custList[this.index1].id
        // this.$emit('bind1Change', this.custList[this.index1]);
      },
      resetClick() {
        this.index1 = '';
        this.index2 = '';
        this.range = [];
        this.searchData = '';
        this.$emit('resetChange');
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      bindDateChange: function (e) {
        this.date = e.detail.value;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .searchBox {
    background: #fff;
    font-size: 24.88rpx;

    .title {
      text-align: center;
      height: 46px;
      line-height: 44px;
      position: relative;

      .close-icon {
        position: absolute;
        cursor: pointer;
        right: 38rpx;
      }
    }

    .top {
      padding: 20rpx;

      .items {
        display: flex;
        justify-content: start;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;

        .til {
          width: 60px;
          margin-right: 20rpx;
        }

        picker {
          padding: 0 10rpx !important;
        }

        picker,
        input {
          width: 81%;
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          padding: 5rpx 10rpx;
          height: 40px;
          line-height: 40px;
          color: #999 !important;
        }

        input::-webkit-input-placeholder {
          color: red;
          font-size: 24.88rpx;
        }
      }

      .btn {
        text-align: center;
        margin-top: 35rpx;

        button:first-child {
          margin-right: 10rpx;
        }

        button {
          height: 45px !important;
          line-height: 45px !important;
          width: 49%;
        }

        button.btn1 {}

        button.btn2 {
          background-color: #D9D9D9 !important;
          border: 1rpx solid #D9D9D9 !important;
          color: #333 !important;
        }
      }

    }
  }
</style>